<template>
	<view class="p30 commentBox">
		<view v-if="!isSell">
			<view v-for="(v,i) in goodsList" :key="i" class="main bgw">
				<view class="goods">
					<image :src="v.image" mode=""></image>
					<p class="two">
						{{v.name}}
					</p>
				</view>
				<view class="stare bb">
					评分
					<u-rate :count="count" :current="v.score"></u-rate>
				</view>
				<textarea v-model="v.content" placeholder="从多个角度评价一下吧！您的评价会帮助到更多小伙伴哦~   " />
				<view class="imgarr">
					<view v-show="v.images.length <3" @tap="uploadImg(i)">
						<image src="../../static/image/addtu.png" mode=""></image> 
					</view>
					<view v-for="(j,k) in v.images" :key="k">
						<image :src="j" mode=""></image>
						<image @tap="delectImg(i,k)" class="delect" src="../../static/image/shanchu@2x.png"></image>
					</view> 
				</view>
			</view>
			<u-button @tap="checking()" class="addBtn" type="success">发布</u-button>
		</view>
		<view  class="isSells" v-if="isSell">
			<view v-for="(v,i) in goodsList" :key="i" class="main bgw">
				<view class="goods">
					<image :src="v.productInfo.thumbnail" mode=""></image>
					<view class="text">
						<p class="two">
							{{v.productInfo.name}}
						</p>
						<view class="stare ">
							评分 <image v-for="(j,k) in v.score" :key="k" src="../../static/image/star.png" mode=""></image>
						</view>
					</view> 
				</view>
				
				<view class="content">
					<p>
						{{v.memberInfo.name}} :
					</p>
					<p>
						{{!!v.content?v.content:'当前用户未评价'}}
					</p>
				</view>
				<view v-if="v.images" class="imgarr">
					<view v-for="(j,k) in v.images" :key="k">
						<image :src="j" mode=""></image> 
					</view> 
				</view>
				<textarea class="sellTxt" v-model="v.reply" maxlength="200" placeholder="快来回复一下顾客的评价吧~（最多200字）~ " />
			</view>
			<u-button @tap="checkingReply()" class="addBtn" type="success">发布</u-button>
		</view>
		
	</view>
</template>

<script>
	import {url1} from '@/api/common.js'
	import {productCommentCreate,productCommentList,productCommentListReply} from '@/api/api.js'
	export default {
		data() {
			return {
				isSell:false,
				count: 5, 
				goodsList:[],
				id:0
			};
		},
		onLoad(e) {
			if(e.id){
				this.isSell = true
				this.id = e.id
				this.init()
			}else{
				let CreateComment  = uni.getStorageSync('CreateComment')
				this.id = CreateComment.id 
				let goods = CreateComment.orderItems
				for(let i=0;i<goods.length;i++){ 
					goods[i].content = ''
					goods[i].score = 5
					goods[i].images = []
				}
				this.goodsList = goods
			} 
		},
		methods:{
			checkingReply(){
				let data = this.goodsList
				let parameret = []
				let	parameretDatas ={}
				for(let i =0; i<data.length;i++){
					parameretDatas.productId = data[i].productInfo.productId
					parameretDatas.reply = data[i].reply
					parameretDatas.commentId = data[i].id  
					if(data[i].reply == ''){
						this.$u.toast(`请填写回复内容`);
						return
					}
					
					parameret.push(parameretDatas) 
					parameretDatas={}
				} 
				this.sendReply(parameret)
			},
			async sendReply(parameret){
				let parameretData = {
					orderId:this.id,
					comments:parameret
				}
				let data = await productCommentListReply(parameretData)
				if(data.code == 0){
					uni.redirectTo({
						url:'../type/type?state=comment'
					})
				}
			},
			async init(){
				let data = await productCommentList({
					orderId:this.id
				})
				 let goodsList = data.data.content
				 for(let i = 0; i<goodsList.length;i++){
					 goodsList[i].reply = ''
				 }
				this.goodsList =  goodsList
			},
			checking(){
				let data = this.goodsList
				let parameret = []
				let	parameretDatas ={}
				for(let i =0; i<data.length;i++){
					parameretDatas.productId = data[i].productInfo.id
					parameretDatas.content = data[i].content
					if(data[i].content == ''){
						this.$u.toast(`请填写评价内容`);
						return
					}
					parameretDatas.score = data[i].score
					parameretDatas.images = data[i].images
					parameret.push(parameretDatas) 
					parameretDatas={}
				}
				this.send(parameret)
			},
			async send(parameret){
				let data = await productCommentCreate({
					orderId:this.id,
					comments:parameret
				})
				if(data.code == 0){
					uni.redirectTo({
						url:'../type/type?state=comment'
					})
				}
			},
			go(url){
				this.$navigateTo(url)
			},
			delectImg(i,k){
				this.goodsList[i].images.splice(k,1)  
			},
			uploadImg(index) {
				uni.chooseImage({
					count: 1,
					success: res => {
						uni.showLoading({
							mask: true
						})
						let sum = res.tempFilePaths.length - 1;
			
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.uploadFile({
								url: url1 + 'file/upload',
								filePath: res.tempFilePaths[i],
								name: 'file',
								success: res => {
									let urls = res.data;
									urls = JSON.parse(urls); 
									 this.goodsList[index].images.push(urls.url)
									uni.hideLoading()
								}
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					}
				});
			},
			
		}
	}
</script>

<style lang="less" scoped>
	.commentBox{
		padding-bottom: 200rpx;
	}
	.main{ 
		margin-top: 26rpx;
		box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.03);
		border-radius: 20rpx;
		padding: 30rpx;
	}
	.goods{
		display: flex;
		image{
			width: 100rpx;
			height: 100rpx;
			border-radius: 8px;
		}
		p{
			flex: 1;
			padding-left: 10rpx;
		}
	}
	.stare{ 
		line-height: 100rpx;
		font-size: 32rpx; 
		font-weight: bold;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-left: 24rpx;
		}
	}
	textarea{
		width: 630rpx;
		padding: 30rpx; 
		font-size: 28rpx; 
		line-height: 45rpx;
		height: 260rpx;
	}
	.imgarr{
		display: flex;
		flex-wrap: wrap;
		view{
			position: relative;
			margin-right: 24rpx;
		}
		image{
			width: 140rpx;
			height: 140rpx;
			border-radius: 10rpx;
		}
		.delect{
			width: 36rpx;
			height: 36rpx;
			position: absolute;
			right: -10rpx;
			top: -10rpx;
		}
	}
	.addBtn{
		width: 690rpx;
		height: 84rpx;
		border-radius: 50rpx;
		position: fixed;
		left: 30rpx; 
		bottom: 40rpx;
	}
	.sellTxt{ 
		width: 580rpx;
		height: 160rpx;
		background: #F8F8F8;
		border-radius: 8px;
	}
	.isSells{
		.text{
			padding-left: 16rpx;
		}
		.stare{ 
			padding-left: 10rpx;
			line-height: 60rpx;
			font-size: 26rpx; 
			font-weight: 400;
			color: #666666;
			image{
				width: 26rpx;
				height: 26rpx;
				margin-left:6rpx;
			}
		}
		.content{
			margin-top: 30rpx;
		}
		.imgarr{
			margin-top: 40rpx;
		}
		textarea{
			margin-top: 20rpx;
		}
	}
</style>
